<template><div><h2 id="开发前必读" tabindex="-1"><a class="header-anchor" href="#开发前必读"><span>开发前必读</span></a></h2>
<h2 id="开发环境请打开debug模式" tabindex="-1"><a class="header-anchor" href="#开发环境请打开debug模式"><span>开发环境请打开debug模式</span></a></h2>
<p><code v-pre>Dcat Admin</code>提供一些开发工具（如代码生成器）需要在 <code v-pre>debug</code> 模式下才能使用。<br>
建议开发者在开发环境打开<code v-pre>debug</code>模式，把<code v-pre>.env</code>配置文件中的参数<code v-pre>APP_DEBUG</code>值设置为<code v-pre>true</code>即可。</p>
<h2 id="按需引入js脚本" tabindex="-1"><a class="header-anchor" href="#按需引入js脚本"><span>按需引入JS脚本</span></a></h2>
<p><code v-pre>Dcat Admin</code> 使用 <code v-pre>jquery-pjax</code> 构建无刷新页面（单页应用），并且支持<strong>按需加载</strong> <code v-pre>JS</code> 脚本，支持在任意的页面方法（模板文件除外）中引入<code v-pre>JS</code>脚本，每个页面只需加载当前页面所需要使用到的 <code v-pre>js</code> 脚本。</p>
<p>示例：</p>
<p>写一个自定义页面，这个页面组件需要引入一些前端静态资源文件</p>
<blockquote>
<p>{tip} <code v-pre>Dcat Admin</code>构建的是一个单页应用，加载的<code v-pre>JS</code>脚本只会执行一次，所以初始化操作不能直接放在<code v-pre>JS</code>脚本中，应该使用<code v-pre>Admin::script</code>方法载入。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Contracts<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Renderable</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Card</span> <span class="token keyword">implements</span> <span class="token class-name">Renderable</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token variable">$js</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token comment">// js脚本不能直接包含初始化操作，否则页面刷新后无效</span></span>
<span class="line">        <span class="token string single-quoted-string">'xxx/js/card.min.js'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token variable">$css</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'xxx/css/card.min.css'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">script</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token string heredoc-string"><span class="token delimiter symbol"><span class="token punctuation">&lt;&lt;&lt;</span>JS</span></span>
<span class="line">        console.log('所有JS脚本都加载完了');</span>
<span class="line">        // 初始化操作</span>
<span class="line">        $('xxx').card();</span>
<span class="line"><span class="token delimiter symbol">JS<span class="token punctuation">;</span></span></span>        </span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 在这里可以引入你的js或css文件</span></span>
<span class="line">        <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token keyword static-context">static</span><span class="token operator">::</span><span class="token variable">$js</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token keyword static-context">static</span><span class="token operator">::</span><span class="token variable">$css</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 需要在页面执行的JS代码，例如初始化代码</span></span>
<span class="line">        <span class="token comment">// 通过 Admin::script 设置的JS代码会自动在所有JS脚本都加载完毕后执行</span></span>
<span class="line">        <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'...'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在控制器中使用这个组件</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Card</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">HomeController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 使用上面的Card组件</span></span>
<span class="line">        <span class="token comment">// Card组件需要用到的静态文件只会在当前请求加载</span></span>
<span class="line">        <span class="token comment">// 其他请求不会加载 </span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Card</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="在页面中添加js代码" tabindex="-1"><a class="header-anchor" href="#在页面中添加js代码"><span>在页面中添加JS代码</span></a></h2>
<p>由于加入了页面按需加载<code v-pre>JS</code>脚本的功能，所以在本项目内添加的<code v-pre>JS</code>代码都必须使用<code v-pre>Dcat.ready</code>方法监听<code v-pre>JS</code>脚本加载完毕事件，在此事件内的<code v-pre>JS</code>代码会在所有<code v-pre>JS</code>脚本都加载完毕后才执行。</p>
<p>使用 <code v-pre>Dcat\Admin\Admin::script</code> 方法添加的代码会自动放在<code v-pre>Dcat.ready</code>方法内执行。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">UserController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">   <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token punctuation">{</span></span>
<span class="line">       <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span></span>
<span class="line">           <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token function">JS</span></span>
<span class="line"><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 如果有定义局部变量的需求，最好放在匿名函数内，防止变量污染</span></span>
<span class="line">    <span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string single-quoted-string">'test'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'所有JS脚本都加载完毕啦~~'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>    </span>
<span class="line"><span class="token constant">JS</span></span>
<span class="line">       <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">       <span class="token keyword">return</span> <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">header</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">   <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果是在模板文件中添加<code v-pre>JS</code>代码，则需要把代码放在<code v-pre>Dcat.ready</code>内执行</p>
<div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre v-pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"><span class="token comment">// 用 Dcat.ready() 代替 $()</span></span>
<span class="line"><span class="token comment">// 此方法会在所有 js 脚本加载完成后执行</span></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 写入你的 js 代码</span></span>
<span class="line">    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'所有 js 脚本加载完毕啦~~'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="页面内容和布局" tabindex="-1"><a class="header-anchor" href="#页面内容和布局"><span>页面内容和布局</span></a></h2>
<blockquote>
<p>{tip} 页面内容的布局功能是<code v-pre>Dcat Admin</code>的基石，掌握了这个功能的用法，可以非常轻松的使用<code v-pre>Dcat Admin</code>构建页面或扩展功能，请大家一定要认真阅读。</p>
</blockquote>
<p><code v-pre>Dcat Admin</code>的布局可参考后台首页的布局文件<code v-pre>app/Admin/Controllers/HomeController.php</code>的<code v-pre>index()</code>方法。</p>
<p><code v-pre>Dcat\Admin\Layout\Content</code>类用来实现内容区的布局。<code v-pre>Content::body($content)</code>方法用来添加页面内容。</p>
<p>一个简单的后台页面代码如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 选填</span></span>
<span class="line">    <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">header</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'填写页面头标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 选填</span></span>
<span class="line">    <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'填写页面描述小标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 添加面包屑导航</span></span>
<span class="line">    <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">breadcrumb</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token punctuation">[</span><span class="token string single-quoted-string">'text'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'首页'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'url'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'/admin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">[</span><span class="token string single-quoted-string">'text'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'用户管理'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'url'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'/admin/users'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">[</span><span class="token string single-quoted-string">'text'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'编辑用户'</span><span class="token punctuation">]</span></span>
<span class="line">    <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 填充页面body部分，这里可以填入任何可被渲染的对象</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'hello world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>其中 <code v-pre>$content-&gt;body()</code> 方法是 <code v-pre>$content-&gt;row()</code> 的别名方法，可以接受任何可字符串化的对象作为参数，可以是字符串、数字、包含了<code v-pre>__toString</code>方法的对象，实现了<code v-pre>Renderable</code>、<code v-pre>Htmlable</code>接口的对象，包括laravel的视图。</p>
<h3 id="布局" tabindex="-1"><a class="header-anchor" href="#布局"><span>布局</span></a></h3>
<p><code v-pre>dcat-admin</code>的布局使用bootstrap的栅格系统，每行的长度是12，下面是几个简单的示例：</p>
<p>添加一行内容:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$content</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'hello'</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span></span>
<span class="line"><span class="token operator">|</span><span class="token class-name">hello</span>                          <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>                               <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>                               <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>                               <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>                               <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>                               <span class="token operator">|</span></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>行内添加多列：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$content</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Row</span> <span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'baz'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span></span>
<span class="line"><span class="token operator">|</span><span class="token class-name">foo</span>       <span class="token operator">|</span><span class="token class-name">bar</span>       <span class="token operator">|</span><span class="token class-name">baz</span>       <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span class="token variable">$content</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Row</span> <span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span></span>
<span class="line"><span class="token operator">|</span><span class="token class-name">foo</span>       <span class="token operator">|</span><span class="token class-name">bar</span>                  <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>                     <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>                     <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>                     <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>                     <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>                     <span class="token operator">|</span></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>列中添加行：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$content</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Row</span> <span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'xxx'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Column</span> <span class="token variable">$column</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'111'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'222'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'333'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span></span>
<span class="line"><span class="token operator">|</span><span class="token class-name">xxx</span>       <span class="token operator">|</span><span class="token number">111</span>                  <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span><span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span><span class="token number">222</span>                  <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span><span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span><span class="token number">333</span>                  <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>                     <span class="token operator">|</span></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span></span>
<span class="line"></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>列中添加行, 行内再添加列：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$content</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Row</span> <span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'xxx'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Column</span> <span class="token variable">$column</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'111'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'222'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Row</span> <span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'444'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'555'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span></span>
<span class="line"><span class="token operator">|</span><span class="token class-name">xxx</span>       <span class="token operator">|</span><span class="token number">111</span>                  <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span><span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span><span class="token number">222</span>                  <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span><span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span><span class="token number">444</span>      <span class="token operator">|</span><span class="token number">555</span>        <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>         <span class="token operator">|</span>           <span class="token operator">|</span></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等宽布局" tabindex="-1"><a class="header-anchor" href="#等宽布局"><span>等宽布局</span></a></h4>
<p>当列宽度设置为<code v-pre>0</code>时会使用等宽布局</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Row</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">return</span> <span class="token class-name static-context">Content</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Row</span> <span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'baz'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span></span>
<span class="line"><span class="token operator">|</span><span class="token class-name">foo</span>       <span class="token operator">|</span><span class="token class-name">bar</span>       <span class="token operator">|</span><span class="token class-name">baz</span>       <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span></span>
<span class="line"><span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span>          <span class="token operator">|</span></span>
<span class="line"><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="no-gutters" tabindex="-1"><a class="header-anchor" href="#no-gutters"><span>no-gutters</span></a></h4>
<p><code v-pre>.row</code>上带有<code v-pre>margin-left: -15px;margin-right: -15px;</code>属性，你可以在<code v-pre>.row</code>上上定义<code v-pre>.no-gutters</code>属性，从而消除这个属性，使页面不会额外宽出<code v-pre>30px</code>，即<code v-pre>&lt;div class=&quot;row no-gutters&quot;...</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$content</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Row</span> <span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 启用 no-gutters</span></span>
<span class="line">    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">noGutters</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">9</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Column</span> <span class="token variable">$column</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">card</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'col-md-12'</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'#4DB6AC'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Row</span> <span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// 启用 no-gutters</span></span>
<span class="line">            <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">noGutters</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">card</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'col-md-4'</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'#80CBC4'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">card</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'col-md-4'</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'#4DB6AC'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Column</span> <span class="token variable">$column</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">row</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Row</span> <span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token comment">// 启用 no-gutters</span></span>
<span class="line">                    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">noGutters</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">card</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'col-md-6'</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'#26A69A'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                    <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">card</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'col-md-6'</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'#26A69A'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下</p>
<p><img src="https://cdn.learnku.com/uploads/images/202102/05/38389/4YlO8aOPCW.jpg!large" alt=""></p>
<h3 id="构建无菜单栏页面-full" tabindex="-1"><a class="header-anchor" href="#构建无菜单栏页面-full"><span>构建无菜单栏页面 (full)</span></a></h3>
<p>通过以上方法构建的页面默认是带有左边菜单栏和顶部导航栏的，<br>
但有时候我们会需要构建一个没有菜单栏和顶部导航栏的完整页面，如登陆页面，或需要在IFRAME中加载的页面等等。</p>
<p>这时候就可以用 <code v-pre>Content::full</code> 这个方法了，调用了此方法后渲染出来的页面是不带菜单栏和顶部导航栏的，并且还可以使用 <code v-pre>Dcat Admin</code> 中的所有的功能和组件的，可以显著地提高效率。</p>
<p>下面将通过登录页的实现来演示此功能的用法</p>
<p>控制器</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">AuthController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">getLogin</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">guard</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">check</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">redirectPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">        <span class="token comment">// 使用full方法构建登陆页面</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">full</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token function">view</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">view</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span>    </span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>下面是登陆功能的模板内容，因为控制器中使用了<code v-pre>Content::full</code>方法构建页面，所以不需要在模板中写<code v-pre>head</code>，也不需要关心引入哪些静态资源，只需写当前页面的HTML即可，并且还可以使用<code v-pre>Dcat Admin</code>中的所有功能，如下面用到的表单提交功能。</p>
<div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre v-pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
<span class="line">    <span class="token selector">html body</span> <span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span><span class="token punctuation">}</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ admin_asset('@admin/css/pages/authentication.css') }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row flexbox-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line">    <span class="token comment">&lt;!-- 这里是你的登陆页面HTML代码 --></span></span>
<span class="line">    ...</span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// ajax表单提交</span></span>
<span class="line">    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#login-form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">form</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">        <span class="token literal-property property">validate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这个登陆页面使用了<code v-pre>ajax</code>表单提交功能，并且附带了按钮<code v-pre>loading</code>效果，比原来的登陆功能用户体验更好，大家可以<a href="http://103.39.211.179:8080/admin/auth/login" target="_blank" rel="noopener noreferrer">点这里体验</a>。</p>
<h3 id="事件" tabindex="-1"><a class="header-anchor" href="#事件"><span>事件</span></a></h3>
<p>系统会在<code v-pre>Dcat\Admin\Layout\Content</code>类被实例化时和<code v-pre>render()</code>方法被调用时触发以下两个事件，开发者可以在这两个事件中改变或添加一些行为。</p>
<h4 id="实例化-resolving" tabindex="-1"><a class="header-anchor" href="#实例化-resolving"><span>实例化 (resolving)</span></a></h4>
<p>通过<code v-pre>Content::resolving</code>方法设置的回调函数会在<code v-pre>Dcat\Admin\Layout\Content</code>类被实例化时触发；</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Content</span><span class="token operator">::</span><span class="token function">resolving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'app.admin.content'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="构建页面-composing" tabindex="-1"><a class="header-anchor" href="#构建页面-composing"><span>构建页面 (composing)</span></a></h4>
<p>通过<code v-pre>Content::composing</code>方法设置的回调函数会在<code v-pre>Dcat\Admin\Layout\Content::render</code>方法被调用时触发；</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Content</span><span class="token operator">::</span><span class="token function">composing</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'app.admin.content'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="构建完成-composed" tabindex="-1"><a class="header-anchor" href="#构建完成-composed"><span>构建完成 (composed)</span></a></h4>
<p>通过<code v-pre>Content::composed</code>方法设置的回调函数会在所有通过<code v-pre>Content::row</code>或<code v-pre>Content::body</code>方法设置的内容都构建完毕后触发。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">IndexController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Content</span><span class="token operator">::</span><span class="token function">composed</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// Grid已执行render方法</span></span>
<span class="line"></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$content</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$grid</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Grid</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token operator">...</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token variable">$grid</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="admincontroller" tabindex="-1"><a class="header-anchor" href="#admincontroller"><span>AdminController</span></a></h2>
<p>通过上面页面布局的相关内容的学习，我们明白了<code v-pre>Dcat Admin</code>的页面组成构建的方法，那么一个增删改查功能究竟是怎么实现的呢？我们可以看到一个由代码生成器生成的增删改查控制器代码大概如下所示</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Repositories<span class="token punctuation">\</span>User</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Form</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Show</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Controllers<span class="token punctuation">\</span>AdminController</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">UserController</span> <span class="token keyword">extends</span> <span class="token class-name">AdminController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 数据表格</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">grid</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Grid</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Grid</span> <span class="token variable">$grid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token operator">...</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 数据详情</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">detail</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Show</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Show</span> <span class="token variable">$show</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token operator">...</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 表单</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Form</span> <span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token operator">...</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>上面的代码主要包含了<code v-pre>grid</code>、<code v-pre>detail</code>和<code v-pre>form</code>，从这些代码中，我们并没有办法改变一个页面的布局，那这个页面究竟是怎么构建的？我们又如何更改页面的布局？我们不妨打开<code v-pre>AdminController</code>看一看</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Controllers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Routing<span class="token punctuation">\</span>Controller</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">AdminController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 页面标题</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$title</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 页面描述信息</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$description</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token comment">//        'index'  => 'Index',</span></span>
<span class="line">        <span class="token comment">//        'show'   => 'Show',</span></span>
<span class="line">        <span class="token comment">//        'edit'   => 'Edit',</span></span>
<span class="line">        <span class="token comment">//        'create' => 'Create',</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 指定语言包名称，默认与当前控制器名称相对应</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$translation</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 返回页面标题</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">title</span> <span class="token operator">?</span><span class="token punctuation">:</span> <span class="token function">admin_trans_label</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 返回描述信息</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">description</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">description</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 列表页</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$content</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'index'</span><span class="token punctuation">]</span> <span class="token operator">??</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.list'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">grid</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 详情页</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">show</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">,</span> <span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$content</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'show'</span><span class="token punctuation">]</span> <span class="token operator">??</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.show'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">detail</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 编辑页</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">edit</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">,</span> <span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$content</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'edit'</span><span class="token punctuation">]</span> <span class="token operator">??</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.edit'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">edit</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 新增页</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">create</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$content</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'create'</span><span class="token punctuation">]</span> <span class="token operator">??</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.create'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 修改接口</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">update</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">update</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 新增接口</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">store</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">store</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 删除/批量删除接口</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">destroy</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>现在是不是就可以明白整个页面的组成部分了呢？其实系统内很多代码都是见名知意、简单易懂的，很多时候我们只需要通过阅读代码就可以知道用法。<br>
例如我们要更改页面标题，通过阅读这段代码，就可以得知可以通过重写<code v-pre>title</code>方法或更改翻译文件的方式实现，是不是非常简单？</p>
<p>下面我们通过实现一个数据表格 + 数据统计卡片的列表页面，来演示一下更改页面布局的实际应用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Examples<span class="token punctuation">\</span>NewDevices</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Examples<span class="token punctuation">\</span>NewUsers</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Metrics<span class="token punctuation">\</span>Examples<span class="token punctuation">\</span>TotalUsers</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Content</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Layout<span class="token punctuation">\</span>Row</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Content</span> <span class="token variable">$content</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$content</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'index'</span><span class="token punctuation">]</span> <span class="token operator">??</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.list'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Row</span> <span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">TotalUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">NewUsers</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$row</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">NewDevices</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">grid</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>实现效果如下</p>
<p><img src="https://cdn.learnku.com/uploads/images/202005/06/38389/p1lAW4NpQi.png!large" alt=""></p>
<h2 id="bootstrap4公共样式" tabindex="-1"><a class="header-anchor" href="#bootstrap4公共样式"><span>Bootstrap4公共样式</span></a></h2>
<p><code v-pre>Dcat Admin</code>采用<code v-pre>bootstrap4</code>的栅格系统对页面进行布局，既简单又强大，开始开发前需要对此有所了解，另外<code v-pre>bootsrap4</code>提供了非常多非常有用的<a href="https://getbootstrap.net/docs/utilities/borders/" target="_blank" rel="noopener noreferrer">公共样式</a>，对编写页面组件非常有帮助，能显著提高开发效率，建议编写组件前先查阅一遍文档，以下是推荐学习的样式列表：</p>
<ul>
<li><a href="https://getbootstrap.net/docs/layout/grid/" target="_blank" rel="noopener noreferrer">栅格布局</a></li>
<li><a href="https://getbootstrap.net/docs/utilities/display/" target="_blank" rel="noopener noreferrer">Display显示属性</a> 通过我们的显示实用程序，可以快速、有效地切换组件的显示值和更多，包括对一些更常见的值的支持，此样式列表对响应式布局非常有帮助。</li>
<li><a href="https://getbootstrap.net/docs/utilities/flex/" target="_blank" rel="noopener noreferrer">flex弹性布局</a> 引入新的Flex弹性布局，可以实现通过一整套响应灵活的实用程序，快速管理栅格的列、导航、组件等的布局、对齐和大小。通过进一度的定义CSS，还可以实现更复杂的展示样式。</li>
<li><a href="https://getbootstrap.net/docs/utilities/colors/" target="_blank" rel="noopener noreferrer">颜色(Color)</a> 通过颜色传达意义、表达不同的模块，这有一系列的定义方法，包括支持链接、悬停、选中等状态相关的的样式集。</li>
<li><a href="https://getbootstrap.net/docs/utilities/float/" target="_blank" rel="noopener noreferrer">Float浮动属性</a> 使用我们的响应式float浮动通用样式，能在任何设备断点（浏览器尺寸）上切换浮动。</li>
<li><a href="https://getbootstrap.net/docs/utilities/sizing/" target="_blank" rel="noopener noreferrer">规格(sizi)</a> 使用系统宽度和高度样式，轻松地定义任何元素的宽或高（相对于其父级）</li>
<li><a href="https://getbootstrap.net/docs/utilities/spacing/" target="_blank" rel="noopener noreferrer">间隔(spacing)</a> 内置了各种的快速缩进、隔离、填充等间距处理工具，响应余量和填充实用程序类来修改元素的外观。</li>
<li><a href="https://getbootstrap.net/docs/utilities/text/" target="_blank" rel="noopener noreferrer">文本处理</a> 用于控制文本的对齐、组合、字重等示例以及使用文档。</li>
<li><a href="https://getbootstrap.net/docs/utilities/vertical-align/" target="_blank" rel="noopener noreferrer">垂直对齐(vertical align)</a> 轻松更改内联、内嵌块、内联表和表格单元格元素的垂直对齐方式。</li>
</ul>
<h3 id="内置样式" tabindex="-1"><a class="header-anchor" href="#内置样式"><span>内置样式</span></a></h3>
<p>除了前面提到的<a href="https://getbootstrap.net/docs/utilities/borders/" target="_blank" rel="noopener noreferrer"><code v-pre>bootstrap4</code>公共样式</a>，系统还内置了以下常用样式：</p>
<h4 id="颜色" tabindex="-1"><a class="header-anchor" href="#颜色"><span>颜色</span></a></h4>
<p>请参考<a href="https://learnku.com/docs/dcat-admin/2.x/theme-and-color/8085#f8e56e" target="_blank" rel="noopener noreferrer">颜色表样式</a></p>
<h4 id="阴影" tabindex="-1"><a class="header-anchor" href="#阴影"><span>阴影</span></a></h4>
<p><code v-pre>.shadow</code></p>
<p><code v-pre>.shadow-100</code></p>
<p><code v-pre>.shadow-200</code></p>
</div></template>


